<template>
	<div class="navList">
		<van-tabs>
			<van-tab title="推荐">
				<Recomm></Recomm>
			</van-tab>
			<van-tab title="精品课程">
				<VipCourse></VipCourse>
			</van-tab>
			<van-tab title="教学方法">
				<Teach></Teach>
			</van-tab>
			<van-tab title="办公技巧">
				<Bangong></Bangong>
			</van-tab>
			<van-tab title="职场必备">
				<Career></Career>
			</van-tab>
			<van-tab title="商业必知">
				<Business></Business>
			</van-tab>
			<!-- <img src="img/more.png" /> -->
		</van-tabs>	
	</div>
</template>

<script>
	import Recomm from "./recomm.vue"
	import VipCourse from './vipcourse.vue'
	import Teach from './teach.vue'
	import Bangong from './bangong.vue'
	import Career from './career.vue'
	import Business from './business.vue'
	export default {
		components: {
			Recomm,
			VipCourse,
			Teach,
			Bangong,
			Career,
			Business
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.navList {

		.van-tabs__line {
			background-color: #46b790;
		}

		.van-tab--active {
			color: #46b790;

			span {
				transform: scale(1.15);
			}
		}

		.van-tabs--line .van-tabs__wrap {
			//padding-right: 0.53rem;
			position: sticky;
			top: 0.72rem;
			background-color: #f7f7f7;
			z-index: 5;
			padding-left:0.1rem;
			padding-right:0.2rem;
		}
		/* img {
			position: absolute;
			top: 0.1rem;
			right: 0;
			z-index: 6;
		} */
		.van-tabs__wrap--scrollable .van-tab {
			background-color:#f7f7f7;
		}
		.van-tabs__wrap--scrollable .van-tabs__nav {
			background-color:#f7f7f7;
		}
	}
	
</style>
